<template>
	<view class="comp-image-preview">
		<u-popup :closeIconPos="isRotate?'top-left': 'top-right'" :closeable="true" :show="show" :round="0" mode="center" @close="onCancel" :safeAreaInsetBottom="false"
			bgColor="transparent" :customStyle="isRotate ?{
				transform:'rotate(90deg)',
			} : {}">
			<image :style="imageStyle" :src="src"></image>

		</u-popup>
	</view>


</template>

<script setup>
	import {
		ref,
		reactive,
	} from "vue";
	const props = defineProps({
		show: {
			type: Boolean,
			default: false,
		},
		src: {
			type: String,
			default: '',
		},
		isRotate: {
			type: Boolean,
			default: false,
		},
		imageStyle: {
			type: Object,
			default: () => ({}),
		},
	})
	const emit = defineEmits(['update:show', 'confirm', 'cancel']);

	const onCancel = () => {
		emit('update:show', false);
		emit('cancel')
	}
	const onConfirm = () => {
		emit('update:show', false);
		emit('confirm')
	}
</script>
<style>

</style>
<style lang="scss" scoped>
	.comp-image-preview {
		line-height: 0;

		.u-popup__content {
			rotate: 90deg;
		}
	}

	.u-safe-area-inset-bottom {
		padding-bottom: 0 !important;
	}
</style>